<!DOCTYPE HTML>
<!--
    Dimension by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
    <title>商务汉语教学及评测平台</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <!-- 使用相对路径引用 CSS 文件 -->
    <link rel="stylesheet" href="../static/assets/css/main.css"/>
    <link rel="stylesheet" href="../static/assets/css/custom.css"> <!-- 引入自定义样式表 -->
    <noscript>
        <link rel="stylesheet" href="../static/assets/css/noscript.css"/>
    </noscript>
</head>
<body class="is-preload">

<!-- Wrapper -->
<div id="wrapper">

    <!-- Header -->
    <header id="header">
        <div class="logo">
            <span class="icon fa-gem"></span>
        </div>
        <div class="content">
            <div class="inner">
                <h1>商务汉语教学及评测平台</h1>
            </div>
        </div>

    </header>

    <div class="header-right-buttons">
        <style>
            /* 自定义导航栏样式 */
            .user-nav {
                display: flex;
                gap: 1.5rem;
                align-items: center;
                margin-left: auto; /* 右对齐 */
            }

            .nav-item {
                position: relative;
                transition: all 0.3s ease;
            }

            .nav-link {
                display: flex;
                align-items: center;
                padding: 0.5rem 1rem;
                border-radius: 25px;
                background: rgba(255, 255, 255, 0.1);
                transition: all 0.3s ease;
                color: #f8f9fa;
                text-decoration: none;
                font-size: 0.95rem;
                backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .nav-link:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

            .nav-link::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 25px;
                z-index: -1;
            }

            /* 登录状态用户名样式 */
            .user-profile {
                display: flex;
                align-items: center;
                gap: 0.8rem;
            }

            .username {
                font-weight: 500;
                color: #e9ecef;
                font-size: 0.9rem;
                padding: 0.3rem 0.8rem;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 20px;
            }

            /* 响应式设计 */
            @media (max-width: 768px) {
                .user-nav {
                    gap: 1rem;
                    padding: 0.5rem 0;
                }

                .nav-link {
                    padding: 0.4rem 0.8rem;
                    font-size: 0.85rem;
                }

                .username {
                    display: none; /* 移动端隐藏用户名 */
                }
            }

            /* 图标样式 */
            .nav-icon {
                margin-right: 8px;
                font-size: 1.1rem;
                vertical-align: middle;
            }
        </style>

        <ul class="user-nav">
            {% if user %}
                <li class="nav-item user-profile">
                    <a href="{{ url_for('auth.index') }}" class="username-link">
                        <span class="username">
                            <i class="fas fa-user-circle nav-icon"></i>
                            {{ user.username }}
                         </span>
                    </a>
                    <a class="nav-link" href="{{ url_for('auth.logout') }}">
                        <i class="fas fa-sign-out-alt nav-icon"></i>
                        退出
                    </a>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('auth.login') }}">
                        <i class="fas fa-sign-in-alt nav-icon"></i>
                        登录
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link register-btn" href="{{ url_for('auth.register') }}">
                        <i class="fas fa-user-plus nav-icon"></i>
                        注册
                    </a>
                </li>
            {% endif %}
        </ul>
    </div>


    <!-- Footer -->
    <footer id="footer">
        <p class="copyright"></p>
    </footer>

</div>

<!-- BG -->
<div id="bg"></div>

<!-- Scripts -->
<!-- 使用相对路径引用 JavaScript 文件 -->
<script src="/static/assets/js/jquery.min.js"></script>
<script src="/static/assets/js/browser.min.js"></script>
<script src="/static/assets/js/breakpoints.min.js"></script>
<script src="/static/assets/js/util.js"></script>
<script src="/static/assets/js/main.js"></script>
<script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
</body>
</html>